<template>
    <div>
        <!--商品列表-->
        <div class="mui-card" v-for="(item,i) in list" :key="item.id">
            <mt-switch 
            @change='selectedChanged(item.id,item.selected)'
            v-model="item.selected">
            </mt-switch>
            
            <img :src="item.img" alt="" srcset="">
            <div class="info">
                <h1>{{item.title}}</h1>
                <p>
                    <span class="price">{{item.price}}</span>
                    <numbox :initCount="item.count" :goodsId="item.id"></numbox>
                    <a @click="remove(item.id,i)">删除</a>
                </p>
            </div>
            
        </div>

        <!--结算区域-->
        <div class="mui-card jiesuan">
            <div class="left">
                <p>总计(不含运费)</p>
                <p>已勾选商品 <span>{{$store.getters.sum.num}}</span> 件 ，总价 <span>￥{{$store.getters.sum.sum}}</span></p>
            </div>
            <mt-button type="danger">结算</mt-button>
        </div>

        
    </div>
</template>

<script>
import numbox from './shopcar_numbox.vue'
export default {
    data() {
        return {
            list:[]
        }
    },
    created(){
        this.list = JSON.parse(sessionStorage.getItem('goods'));
        console.log(this.list)
    },
    components:{
        numbox,
    },
    methods:{
        remove(id,i){
            this.list.splice(i,1);
            this.$store.commit('remove',id);
        },
        selectedChanged(id){
            this.$store.commit('change',id);
        },
    }
    
}
</script>
<style scoped>
.mui-card img{
    width: 60px;
    height: 60px;
}
.mui-card h1{
    font-size: 13px;
}
.price{
    color: red;
    font-weight: bold;
}
.mui-card{
    padding-left:5%;
    display: flex;
    align-items: center;
}
.info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.jiesuan{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
.jiesuan span{
    font-weight: bold;
    color: red;
    font-size: 16px;
}
</style>
